<template>
  <section class="component work-user">
    <el-dropdown @command="dropdownClickHandle" trigger="click">
      <div class="row middle-span">
        <img class="user-photo" src="@/assets/images/common/user-photo.png" />
        <span class="user-name">欢迎您, {{userData.realName}}</span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command='exit'>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { State, Mutation } from "vuex-class";

@Component({
  components: {
  }
})
export default class WorkUser extends Vue {
  @State userData;

  /**
   *  用户操作处理
   */
  dropdownClickHandle(command) {
      if("exit" === command) { 
        this.$router.push("/");
      }
  }
}
</script>

<style lang="less" scoped>
.work-user.component {
  * {
    padding: 0 10px;
    color: white;
  }
}
</style>
